<template>
  <div>
    <img :src="image" class="banner">
    <div class="banner-title">中底科技</div>
    <div v-if="z_list.length > 0">
      <img :src="z_list[z_index].image" class="banner-img">
      <div class="banner-dot">
        <img src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/right1.png" class="banner-dot-img" @click="zScroll(1)">
        <div class="banner-dot-c" id="zlist">
          <div @click="changeZlist(key)" :class="key < z_list.length - 1 ? 'banner-dot-icon-box' : 'banner-dot-icon-box banner-dot-icon-box-no'" v-for="(item,key) in z_list" :key="key" >
            <el-image  :src="item.image" class="banner-dot-icon" fit="cover"></el-image>
          </div>
        </div>
        <img src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/right2.png" class="banner-dot-img" @click="zScroll(2)">
      </div>
    </div>
    <div class="banner-title">碳板科技</div>
    <div v-if="t_list.length > 0">
      <img :src="t_list[t_index].image" class="banner-img">
      <div class="banner-dot" id="tlist">
        <img src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/right1.png" class="banner-dot-img" @click="tScroll(1)">
        <div class="banner-dot-c">
          <div @click="changeTlist(key)" :class="key < t_list.length - 1 ? 'banner-dot-icon-box' : 'banner-dot-icon-box banner-dot-icon-box-no'" v-for="(item,key) in t_list" :key="key" >
            <el-image  :src="item.image" class="banner-dot-icon" fit="cover"></el-image>
          </div>
        </div>
        <img src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/right2.png" class="banner-dot-img" @click="tScroll(2)">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      image:'',
      z_list:[],
      z_index:0,
      t_list:[],
      t_index:0
    }
  },
  mounted() {
    this.getBanner();
    this.getZlist();
    this.getTlist();
  },
  methods:{
    tScroll(type){
      var div = document.getElementById('tlist');

      var nums = 0;
      var timer;
      clearInterval(timer);
      timer = setInterval(()=>{
        div.scrollLeft = type == 1 ? (div.scrollLeft - 20) : (div.scrollLeft + 20);
        nums ++;
        if(nums >= 20)clearInterval(timer);
      },10);
    },
    zScroll(type){
      var div = document.getElementById('zlist');

      var nums = 0;
      var timer;
      clearInterval(timer);
      timer = setInterval(()=>{
        div.scrollLeft = type == 1 ? (div.scrollLeft - 20) : (div.scrollLeft + 20);
        nums ++;
        if(nums >= 20)clearInterval(timer);
      },10);
    },
    changeTlist(index){
      this.t_index = index;
    },
    getTlist(){
      this.ajaxs('Index/slides',{
        data:{
          classify:2,
        },
        success:(res) => {
          this.t_list = res.data;
        }
      })
    },
    changeZlist(index){
      this.z_index = index;
    },
    getZlist(){
      this.ajaxs('Index/slides',{
        data:{
          classify:1,
        },
        success:(res) => {
          this.z_list = res.data;
        }
      })
    },
    getBanner(){
      this.ajaxs('Index/banner',{
        data:{
          classify:3,
        },
        success:(res) => {
          this.image = res.data.image;
        }
      })
    },
  }
}
</script>

<style scoped>
@import "../../assets/css/dw/index.css";
</style>